<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reSearchJournal } from '../../api/journals/index';
import router from '../../router/index';
import { useRouter } from 'vue-router';
import {useJournalStore} from '@/store/modules/journal'
import {
  reJournaladd,
  reJournalquery,
  reJournalqueryid,
  reJournaldelete,
} from "../../api/journals/index";

const formattedDate = `${new Date().getFullYear()}-${(new Date().getMonth() + 1)
  .toString()
  .padStart(2, "0")}-${new Date().getDate().toString().padStart(2, "0")}`;

let journal = ref({
  id: -1,
  date: formattedDate,
  username: "",
  title: "",
  content: "",
});
let journalList = ref();

//  选中日记
const selectedJournal = async (id: number) => {
  const result = ref(await reJournalqueryid(id));
  journal.value = result.value.data;
};

const saveJournal = async () => {
//添加修改
  const res = ref(await reJournaladd(journal.value));
//修第一条数据的bug
  let id = res.value.data;
  const res1 = ref(await reJournalqueryid(id))
  journal.value = res1.value.data;
//更新列表
  const result = ref(await reJournalquery());
  journalList.value = result.value.data;
};

onMounted(async () => {
  const result = ref(await reJournalquery());
  journalList.value = result.value.data;
});
//删除日记
const deleteJournal = async () => {
  await reJournaldelete(journal.value.id);
  const result = ref(await reJournalquery());
  journalList.value = result.value.data;
  journal.value = {  id: -1,
  date: formattedDate,
  username: "",
  title: "",
  content: "",};
};

const add = () => { 
  journal.value = {  id: -1,
  date: formattedDate,
  username: "",
  title: "",
  content: "",};
};

let searchTitle = ref("")

const search = async (searchTitle:any) => {
  //如果为空查询所以，否则按词条查询
if(searchTitle == "" || searchTitle == null){
  const result = ref(await reJournalquery());
  journalList.value = result.value.data;
}else{
  const result = ref(await reSearchJournal(searchTitle));
  journalList.value = result.value.data;
}
}


const $router = useRouter()

const aiHelp = () => {
  useJournalStore().aibutton = !useJournalStore().aibutton
  useJournalStore().systemMsg = `日记:${JSON.stringify(journal.value , null)}`
  console.log(useJournalStore().aibutton)
  $router.push('/ai-aissistant')

}
</script>

<template>
  <div class="common-layout">
    <!-- 头部 -->
    <el-container class="container-wrapper">
      <el-header class="header">
        <div class="header-left">
          <el-input placeholder="按标题查询" v-model="searchTitle" @input = "search(searchTitle)" >
          </el-input>
          <el-icon @click = "search(searchTitle)"><Search /></el-icon>
        </div>
        <div class="header-right">
          <el-button type="warning" @click="aiHelp" round>ai解忧</el-button>
          <el-button type="warning" @click="add" round>新增</el-button>
          <el-button type="primary" @click="saveJournal" round>保存</el-button>
          <el-button type="danger" @click="deleteJournal" round>删除</el-button>
        </div>
      </el-header>
      <el-container class="content-wrapper">
        <!-- 列表 -->
        <el-aside class="aside" width="300px">
          <el-scrollbar>
            <div
              v-for="(item, index) in journalList"
              :key="index"
              @click="selectedJournal(item.id)"
              class="journal-item"
            >
              <div class="journal-date">{{ item.date }}</div>
              <div class="journal-title">{{ item.title }}</div>
            </div>
          </el-scrollbar>
        </el-aside>
        <!-- 内容 -->
        <el-main class="main">
          <el-row :gutter="20" style="width: 100%">
            <el-col :span="12">
              <el-form-item label="标题:">
                <el-input
                  v-model="journal.title"
                  placeholder="请输入标题"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期:">
                <el-date-picker
                  v-model="journal.date"
                  value-format="YYYY-MM-DD "
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-input v-model="journal.content" type="textarea" :rows="20"></el-input>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.title {
}

.common-layout {
  // 设置根容器占满整个视口
  width: 100%;
  height: calc(100% - 30px);
  display: flex;
  padding: 0px;
  margin: 0px;
  background: aquamarine;

  .container-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;

    // 头部样式
    .header {
      height: 60px;
      background: rgb(158, 209, 209);
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    //  头部右侧样式(按钮)
    .header-right {
      display: flex;
      align-items: center;
      margin-right: 20px;
      margin-left: auto; /* 自动左外边距撑满剩余空间 */
    }

    //  头部左侧样式(搜索框)
    .header-left{
      display: flex;
      align-items: center;
    }
    // 内容区域容器
    .content-wrapper {
      flex: 1;
      min-height: 0; // 修复 flex 容器滚动问题
      overflow: hidden;

      // 侧边栏样式
      .aside {
        background: lighten(rgb(158, 209, 209), 10%);
        border-right: 1px solid #ddd;
        overflow-y: auto;
      }

      // 主内容区样式
      .main {
        padding: 20px;
        background: rgb(171, 209, 158);
        overflow-y: auto;
      }
    }
  }

  //列表样式
  .aside {
    background: lighten(rgb(158, 209, 209), 10%);
    border-right: 1px solid #ddd;
    overflow: hidden;

    .journal-item {
      padding: 15px 20px;
      border-bottom: 1px solid #ebeef5;
      cursor: pointer;
      transition: background 0.3s;
      //  background: #fff;

      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }

      .journal-date {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
      }

      .journal-title {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
